<template>
  <!-- 个人信息页面 -->
  <div class="bg">
    <div class="main">
      <!-- 用户头像 -->
      <div class="userImage">
        <img :src="userall.userFace" class="imguser" alt="网络错误" />
      </div>
      <!-- 用户表单展示 -->
      <div class="userFrom">
        <el-form
          :model="userFrom"
          :rules="rules"
          ref="user_From"
          label-width="100px"
          class="demo-ruleForm"
          :disabled="ban"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userFrom.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userFrom.password"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="telephone">
            <el-input v-model="userFrom.telephone"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="userFrom.realname"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="userFrom.gender" placeholder="请选择性别">
              <el-option label="男" value="male"></el-option>
              <el-option label="女" value="female"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生日" prop="birth">
            <el-date-picker
              v-model="userFrom.birth"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="userFrom.email"></el-input>
          </el-form-item>
        </el-form>
        <!-- {{userall.roles[0].id}} -->
        <!-- v-if判断 -->
        <div class="sumbit" v-if="userall.roles[0].id == 2"></div>
        <div class="sumbit" v-else>
          <el-button @click="Edit">编辑</el-button>
          <el-button type="primary" @click="submitForm()"
            >保存信息</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      userall: "",
      value1: "",
      ban: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },

      userFrom: {
        id: "",
        status: "",
        userFace: "",
        registerTime: "",
        nation: "",
        idCard: "",
        idcardPhotoPositive: "",
        idcardPhotoNegative: "",
        bankCard: "",
        bankCardPhoto: "",
        balance: "",
        certificationStatus: "",
        certificationTime: "",

        username: "",
        password: "",
        telephone: "",
        realname: "",
        gender: "",
        birth: "",
        email: "",
      },

      rules: {
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        birth:[
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' },
        ],
        telephone:[
          { type: 'number', required: true, message: '请输入电话', trigger: 'change' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
        ],
        gender:[
          {required:true,message:'请选择性别',trigger:'blur'}
        ],
        email:[
          {required:true,message:'请输入电子邮箱',trigger:'blur'},
          { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '电子邮箱格式格式错误！' },
        ]
      },
    };
  },
  computed: {
    ...mapGetters(["token"]),
  },
  methods: {
    //通过token值获取用户所有信息
    async getAllUserInfo() {
      // console.log(this.token);
      let obj = {
        token: this.token,
      };
      let res = await get("/user/info", obj);
      this.userall = res.data;
      // console.log(this.userall);
      this.userFrom = this.userall;
      console.log(this.userFrom);
    },

     submitForm() {
      this.$refs['user_From'].validate(async (valid) => {
        if (valid) {
           //发送表单验证的请求
          let res = await post("/baseUser/saveOrUpdate", this.userFrom);
          //给用户一个成功的提示
          this.$message({
            showClose: true,
            message: "提交成功",
            type: "success",
          });
          this.getAllUserInfo()
          this.ban=true
        } else {
          this.$message.error({
            showClose: true,
            message: "提交失败",
            type: "error",
          });
          return false;
        }
      });
    },
    //编辑按钮
    Edit() {
      this.ban = false;
    },
  },
  filters: {},
  created() {
    this.getAllUserInfo();
  },
  mounted() {},
};
</script>
<style scoped>
.main {
  margin-left: 33%;
}
.bg {
  height: 637.5px;
  border-radius: 20px;
}
.userImage {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.imguser {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.userFrom {
  position: absolute;
  top: 180px;
  left: 47%;
  transform: translateX(-50%);
}
.sumbit {
  margin: 0 auto;
  margin-left: 101px;
}
</style>